<script lang="ts" setup>
import { useSystemStore } from '@/stores/system'
import { useStyleStore } from '@/stores/style'
import { DialogEnum } from '@/enum'

const systemStore = useSystemStore()
const styleStore = useStyleStore()

const value = ref<'dark' | 'light' | 'auto'>('light')
const options = ['light', 'dark', 'auto']

const bgChange = () => {
  if (value.value === 'auto') {
    styleStore.background.bgIsAuto = true
  } else {
    styleStore.background.bgType = value.value
    styleStore.background.bgIsAuto = false
  }
}

onMounted(() => {
  if (styleStore.background.bgIsAuto) {
    value.value = 'auto'
  } else {
    value.value = styleStore.background.bgType
  }
})

const formatTooltip = (val: number) => {
  return val / 100
}
</script>

<template>
  <DialogTemplate :attribute="DialogEnum.SETTING">
    <el-container class="gap-2" direction="vertical">
      <SvgIcon
        message="系统设置"
        name="setting"
        parent-class="m-auto pb-5 text-xl"
        svg-class="!size-6"
      />
      <el-container class="justify-between items-center">
        <span>主题色</span>
        <el-segmented v-model="value" :options="options" @change="bgChange" />
      </el-container>
      <hr />
      <el-container class="justify-between items-center">
        <span>圆角</span>
        <el-slider
          v-model="styleStore.radius.radiusSize"
          :format-tooltip="formatTooltip"
          :max="200"
          :min="60"
          :step="20"
          class="!w-40 mr-3"
          show-stops
        />
      </el-container>
      <hr />
      <el-container class="justify-between items-center">
        <span>阴影</span>
        <el-slider
          v-model="styleStore.shadow.shadowSize"
          :format-tooltip="formatTooltip"
          :max="100"
          :min="20"
          :step="10"
          class="!w-40 mr-3"
          show-stops
        />
      </el-container>
      <hr />
      <el-container direction="vertical">
        <el-container class="justify-between items-center">
          <span>点击效果</span>
          <el-switch
            v-model="styleStore.mouse.isMouseClick"
            active-text="开"
            inactive-text="关"
            inline-prompt
            size="large"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          />
        </el-container>
        <span class="ml-auto text-xs">如出现卡顿请关闭该效果</span>
      </el-container>
      <hr />
      <el-container direction="vertical">
        <el-container class="justify-between items-center">
          <span>滚动阻尼</span>
          <el-switch
            v-model="systemStore.system.isOpenLenis"
            active-text="开"
            inactive-text="关"
            inline-prompt
            size="large"
            style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          />
        </el-container>
        <span class="ml-auto text-xs">如出现卡顿请关闭该效果</span>
      </el-container>
    </el-container>
  </DialogTemplate>
</template>

<style lang="scss" scoped>
.el-segmented {
  @extend .use-theme !optional;
  @extend .use-transitions-colors !optional;
  --el-segmented-item-selected-color: var(--el-text-color-primary);
  --el-segmented-item-selected-bg-color: #ffd100;
  --el-border-radius-base: 16px;
}
</style>
